@extends("layout")
@section("title", "数据录入")
@section("body")

    <div style="width:90%" class="layui-fluid">
        @include('nav', ['title' => '录入数据中心'])
        @if($auth)
        <div id="input_select">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>指标目标值列表</legend>
            </fieldset>
            <div class="layui-form">
                <div class="layui-form-item">
                    <label class="layui-form-label">业务类型:</label>
                    <div class="layui-input-block">
                        <select name="type_id" lay-verify="required" lay-filter="lay_index_data">
                            <option value="">选择业务类型</option>
                            @foreach($business_type as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="layui-row">
                    <div id="index_data_table_id"></div>
                </div>
                <input type="hidden" value="" id="hide_index_data_id">
            </div>
        </div>


        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;" id="clk-div-index">
            <legend>添加指标 <i class="layui-icon layui-icon-up"></i>   </legend>
        </fieldset>
        <div class="layui-row" id="div-index" style="display: none;">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">业务类型:</label>
                    <div class="layui-input-block">
                        <select name="type_id" lay-verify="required">
                            <option value="">选择业务类型</option>
                            @foreach($business_type as $item)
                                <option value="{{$item->id}}">{{$item->name}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">指标名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" id="index_name_id" value="" required lay-verify="required"
                               placeholder="请输入指标名称"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="business_submit">确认</button>
                        <button type="reset" class="layui-btn layui-btn-primary">刷新</button>
                    </div>
                </div>
            </form>
        </div>

        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;" id="clk-div-index-data">
            <legend>添加指标目标值<i class="layui-icon layui-icon-up"></i> </legend>
        </fieldset>
        <div id="div-index-data" style="display: none">
            <blockquote class="layui-elem-quote layui-quote-nm">如果相同月份则会更新数据</blockquote>
            <div class="layui-row">
                <form class="layui-form" action="">
                    <div class="layui-form-item">
                        <label class="layui-form-label">业务类型:</label>
                        <div class="layui-input-block">
                            <select name="type_id" lay-verify="required" lay-filter="lay_business_type">
                                <option value="">选择业务类型</option>
                                @foreach($business_type as $item)
                                    <option value="{{$item->id}}">{{$item->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">选择月份:</label>
                        <div class="layui-input-block">
                            <input type="text" name="at" class="layui-input" id="at">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div id="index_name_list"></div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="index_data_submit">确认</button>
                            <button type="reset" class="layui-btn layui-btn-primary">刷新</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
    @endif
    {{--@verbatim--}}
        <script id="indexTemplate" type="text/html">
            @{{#  layui.each(d.list, function(index, item){ }}
            <label class="layui-form-label">@{{item.name}}:</label>
            <input type="hidden" name="index_id[]" value="@{{item.id}}">
            <div class="layui-input-inline">
                <input type="number" name="value[]" placeholder="请输入指标目标值"
                       autocomplete="off" class="layui-input" value="@{{item.value}}">
            </div>
            @{{#  }); }}

            @{{#  if(d.list.length === 0){ }}
            <div class="layui-input-block">
                <h3 style="color:#FF5722">请先添加指标再操作</h3>
            </div>
            @{{#  } }}
        </script>

        <script id="indexDataTemplate" type="text/html">
            <table class="layui-table">
                <colgroup>
                    <col>
                </colgroup>
                <thead>
                <tr>
                    @{{#  layui.each(d.list.head, function(index, item){ }}
                        <th>@{{item}}</th>
                    @{{#  }); }}
                </tr>
                </thead>
                <tbody>
                @{{#  layui.each(d.list.body, function(index, item){ }}
                    <tr>
                        @{{#  layui.each(item, function(index, value){ }}
                            <td>@{{value}}</td>
                        @{{#  }); }}
                    </tr>
                @{{#  }); }}
                </tbody>
            </table>
        </script>

@endsection
@section("script")
    <script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form', 'jquery', 'laydate', 'laytpl'], function () {
            var layer = layui.layer
                , form = layui.form
                , $ = layui.jquery
                , laydate = layui.laydate
                , laytpl = layui.laytpl;

            $("button[type='reset']").click(function () {
                window.location.reload();
            });
            
            //添加指标名称
            form.on('submit(business_submit)', function (data) {
                $.post('{{route("add_index_name")}}', data.field, function (rev) {
                    if (rev.status === 0) {
                        $("#input_select select[name='type_id']").val(data.field.type_id);
                        form.render('select');
                        triggerInputClick(data.field.type_id);
                        $("#index_name_id").val("");
                    } else {
                        layer.msg(rev.msg);
                    }
                }, 'json')
                return false;
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#at' //指定元素
                , type: 'month'
                , trigger: 'click'
                , format: 'yyyyMM'
            });

            //添加
            var getTplType = indexTemplate.innerHTML
                , viewType = document.getElementById('index_name_list');
            form.on('select(lay_business_type)', function (data) {
                $.getJSON("{{route('get_index_name')}}", {'type_id': data.value}, function (rev) {
                    if (rev.status === 0) {
                        laytpl(getTplType).render(rev.data, function (html) {
                            viewType.innerHTML = html;
                        });
                    } else {
                        layer.msg(rev.msg);
                    }
                });
            });
            // select 读取列表
            var getTplData = indexDataTemplate.innerHTML
                , viewData = document.getElementById('index_data_table_id');
            form.on('select(lay_index_data)', function (data) {
                $("#hide_index_data_id").val(data.value);
                $.getJSON("{{route('get_index_data')}}", {'type_id': data.value}, function (rev) {
                    if (rev.status === 0) {
                        laytpl(getTplData).render(rev.data, function (html) {
                            viewData.innerHTML = html;
                        });
                    } else {
                        layer.msg(rev.msg);
                    }
                });
            });

            //提交指标数据
            form.on('submit(index_data_submit)', function (data) {
                if(data.field.at === "") {
                    layer.msg("请选择年月");
                    return false;
                }
                $.post('{{route("add_index_data")}}', data.field, function (rev) {
                    if (rev.status === 0) {
                        $("#input_select select[name='type_id']").val(data.field.type_id);
                        form.render('select');
                        triggerInputClick(data.field.type_id);
                    } else {
                        layer.msg(rev.msg);
                    }
                }, 'json');
                return false;
            });

            //编辑事件
            $("#index_data_table_id").on("click", ".data-btn", function () {
               var _this = $(this);
               var at = _this.attr("data-at");
               var type_id = $("#hide_index_data_id").val();
               $.getJSON("{{route('get_index')}}", {at:at, type_id:type_id}, function (rev) {
                   if(rev.status === 0) {
                       $("#type_id").val(type_id);
                       $("#at").val(at);
                       form.render();
                       laytpl(getTplType).render(rev.data, function (html) {
                           viewType.innerHTML = html;
                       });
                       $("#div-index-data").show(500);
                   } else {
                       layer.msg(rev.msg);
                   }
               });
            });
            
            //折合事件
            $("#clk-div-index").click(function () {
                $("#div-index").toggle(500);
                var _this = $(this);
                if(_this.find('i').hasClass('layui-icon-up')) {
                    _this.find("i").addClass('layui-icon-down').removeClass('layui-icon-up');
                } else {
                    _this.find("i").removeClass('layui-icon-down').addClass('layui-icon-up');
                }
            });
            $("#clk-div-index-data").click(function () {
                $("#div-index-data").toggle(500);
                var _this = $(this);
                if(_this.find('i').hasClass('layui-icon-up')) {
                    _this.find("i").addClass('layui-icon-down').removeClass('layui-icon-up');
                } else {
                    _this.find("i").removeClass('layui-icon-down').addClass('layui-icon-up');
                }
            });
            triggerInputClick(1)
            function triggerInputClick(val) {
                $('#input_select').find('dl dd[lay-value='+val+']').trigger('click');
            }
        });
    </script>
    @include('plus.auth')
@endsection